<template>
  <div>
    <h1>Foo Page</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
import bus from '@/utils/bus'

export default {
  data () {
    return {
      posts: [] // 文章列表
    }
  },
  created () {
    this.loadPosts()
  },
  methods: {
    async loadPosts () {
      const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts')
      this.posts = data
      this.$nextTick(() => {
        bus.$emit('render-trigger')
        // document.dispatchEvent(new Event('render-trigger'))
      })
    }
  }
}
</script>

<style>

</style>
